<template>
  <div
   id="drawingBoard"
   ref="drawingBoard"
   class="drawing-board"
   :style="`width: ${canvasWidth}px;height:${canvasHeight}px`">
  </div>
</template>
<script>

/*#region 导入函数*/
import DrawingBoardAll from "./drawingboard.js";
import {getBase64Image} from "./utils.js";
import {addResizeListener, removeResizeListener} from "./resize-event";
import White from "./white.jpg";

const DrawingBoard = DrawingBoardAll.DrawingBoard;

/*#endregion*/

export default{
  name: "DrawingBoard",
  methods: {

    /*#region 自定义函数(组件change事件等)*/

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/

    /*#endregion*/

    /*#region 获取数据*/
    getDrawingBoard() {
      this.drawingBoard = new DrawingBoard.Board('drawingBoard', this.options);
      if(this.image){
        this.getDrawingBoardBackground();
      }
    },
    getDrawingBoardBackground() {
      const image = new Image();
      image.crossOrigin = '';
      image.src = this.image;
      image.onload = () => {
        const base64Image = getBase64Image(image, this.canvasWidth, this.canvasHeight, "image");
        if(base64Image){
          this.options.background = base64Image;
          this.options.imageName = this.image;
          this.drawingBoard && this.drawingBoard.resetBackground(base64Image, () => {
            console.log("设置完成");
          });
        }
      };
    }

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  created() {},
  mounted() {
    this.getDrawingBoard();
    // this.drawingBoard && this.drawingBoard.resize();
    addResizeListener(window.document.body, () => {
      this.innerWidth = window.innerWidth - 10;
      this.innerHeight = window.innerHeight - 10;
      this.drawingBoard && this.drawingBoard.resize();
      console.log("addResizeListener", this.innerWidth, this.innerHeight);
    });
    // window.οnresize=function(){
    //   this.innerWidth = window.innerWidth;
    //   this.innerHeight = window.innerHeight;
    //   this.drawingBoard && this.drawingBoard.resize();
    //   console.log("οnresize");
    // }
  },
  destroyed() {
    removeResizeListener(window.document.body, () => {
      this.innerWidth = window.innerWidth;
      this.innerHeight = window.innerHeight;
      this.drawingBoard && this.drawingBoard.resize();
       console.log("removeResizeListener");
    });
  },

  /*#endregion*/

  /*#region 注册绑定数据*/

  computed: {
    canvasWidth() {
      return this.innerWidth - 10;
    },
    canvasHeight() {
      return this.innerHeight - 10;
    },
    backgroundImage() {
      return this.image || White;
    }
  },
  data() {
    return {
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
      drawingBoard: null,
      options: {
        controls: [
        'Color',
        { Size: { type: "dropdown" } },
        { DrawingMode: { filler: true } },
        'Navigation',
        'Download'
        // 'FileOpen'
        ],
        size: 1,
        background: this.backgroundImage || "#ffffff",
        color: 'black',
        webStorage: true,
        enlargeYourContainer: false,
        imageName: this.image || "white.jpg"
      }
    }
  },
  watch: {
    image: {
      handler(val, oldVal) {
        const _this = this;
        if(val){
          this.getDrawingBoardBackground();
        }
        console.log(val);
      }
    }
  },
  props: {
    image: String
  }

  /*#endregion */

}
</script>
<style scoped>
@import "./drawingboard.css";

.drawing-board{
  width: 100%;
  height:100%;
}
</style>
